<!--
 * @FilePath     : /study_code/layui/13-3-2.html
 * @Description  : 监听表格的复选框事件
 * @Date         : 2025-04-07 17:14:26
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-08 14:46:54
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <table id="demo" lay-filter="test"></table>

    <script src="/layui/dist/layui.js"></script>
    <script src="/layui/table/common.js"></script>
    <script>
      var table = layui.table

      table.render({
        elem: '#demo',
        data: tableData,

        cols: [
          [
            { type: 'checkbox', width: 50 },
            { field: 'id', title: 'ID', width: 80 },
            { field: 'experience', title: '积分', width: 80 },
          ],
        ],
      })

      /**
       * @brief: 监听表格的复选框事件
       * @param {string} checkbox(test) 表格区分
       *    checkbox: 表格监听的事件
       *    test: 表格的 lay-filter 属性对应的参数值；
       * @param {obj} callback(obj)
       * 回调参数 对象 obj：
       *    checked 复选是否选中；{boolean} 例如 true
       *    config 当前表格渲染配置项
       *    data 当前行数据；
       *    dataCache 行数据缓存；
       *    del
       *    getCol
       *    index
       *    setRowChecked
       *    tr
       *    type
       *    update
       * @return {*}
       */
      table.on('checkbox(test)', function (obj) {
        console.log('回调参数对象', obj)
        /*
        {
          checked: true,
          config: { limint: 10. loading: true, cellMinWidth: 60, //... },
          data: { id: 10006, username: 'user-6', sex: '女', city: '城市-6', sign: '签名-6', ...},
          dataCache: { id: 10006, username: 'user-6', sex: '女', city: '城市-6', sign: '签名-6', ...},
          del: f(),
          getCol: f(),
          index: 6,
          setRowChecked: f(e),
          tr: C.fn.init {0:tr, length:1, prevObject: C.fn.init, selector: '.layui-table-body tr[data-index="6"]', ...},
          type:  "one",
          update: f(e,t),
        }
        */
      })
    </script>
  </body>
</html>
